<template>
	<view class="container">
		<view class="listBox padding-top padding-lr-lg padding-bottom-sm">
			<view v-for="(item, index) in mlist" :key="index" class="listItem" :class="'cd'+index" @click.stop="mnavTo(item.url)">
				<view class="min_qiu fixbox"></view>
				<view class="max_qiu fixbox"></view>
				<view class="mconbox">
					<view class="flex align-center padding-lr">
						<view class="ca_tit flex-sub text-cuts">
							<text>{{item.name}}</text>
							<!-- <text v-else class="text-ngreen text-bold">
								<text class="text-xs">￥</text>
								2236.58
							</text> -->
						</view>
						<view class="ca_staut text-ngreen">
							<!-- <text v-if="index == 1" class="acon-logo"></text> -->
							<text  class="text-lg text-c6">2236.58元</text>
						</view>
					</view>
					<view class="text-sm text-c6 paddig-top-xs padding-lr">
						NO：60586596
					</view>
					<!-- <view class="camainMsg text-c6 text-sm padding-lr">
						<view v-if="index == 1" class="">
							面值
							<text class="text-ngreen text-bold text-xxl">1000</text>
							<text class="text-ngreen">元</text>
						</view>
						<view class="ca_dis flex">
							<view class="flex-sub cdtext">使用说明：本套餐仅限隆平园店使用使用说明：本套餐仅限隆平园店 使用使用说明：本套餐仅限隆平园店使用</view>
							<view class="text-ngreen moredis padding-left-xs">查看更多</view>
						</view>
						==>
						<view class="margin-top-xs">有效期至：2022-11-30</view>
						<view class="margin-top-xs flex align-center">
							<view class="flex-sub">手机号：18073533542</view>
							<view class="text-c3 text-bold surnums text-df">剩余次数1</view>
						</view>
						==>
					</view>
					<view v-if="index == 1" class="flex align-center margin-top-sm padding-top-sm padding-lr">
						<view class="flex-sub butips">君临颐而康，如在长寿乡</view>
						<view class="buyBtn" @click.stop="navigateTo('/user/buyHealthCard/buyHealthCard')">购买</view>
					</view> v-else margin-top-sm padding-top-sm-->
					<view class="cbot_btn flex align-center text-ngreen">
						<view class="flex-sub padding-left"><view class="actBtn d_ib">绑卡</view></view>
						<!-- <view class="">
							<view class="d_ib padding-lr">修改密码</view>
							|
							<view class="d_ib padding-lr">解绑</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { mnavTo } from '@/utils/helper';
	// import { onShow } from '@dcloudio/uni-app';
	const mlist = ref([
		{
			id: '0',
			name: '会员卡',
			url: '/pages/user/vipCardDetail/vipCardDetail',
		},
		{
			id: '1',
			name: '套餐卡',
			url: '/pages/user/mealCard/mealCard',
		},
		{
			id: '2',
			name: '尊享卡',
			url: '',
		},
		{
			id: '3',
			name: '新店卡',
			url: '/pages/user/newStoreCard/newStoreCard',
		},
		{
			id: '4',
			name: '健康卡',
			url: '/pages/user/healthCard/healthCard',
		}
	])
</script>

<style lang="scss">
	.listItem {
		width: 100%;
		min-height: 286rpx; //330
		border-radius: 16rpx;
		background: #f4f7ff;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;

		// &.gry {
		// 	background: #f5f5f5;
		// 	.fixbox {
		// 		background: #eeeeee;
		// 	}
		// 	.ca_staut,
		// 	.ca_tit,
		// 	.camainMsg,
		// 	.moredis,
		// 	.surnums {
		// 		color: #999;
		// 	}
		// }
		&:nth-child(2n) {
			.max_qiu {
				left: -122rpx;
				top: 120rpx;
			}

			.min_qiu {
				right: -220rpx;
				bottom: -220rpx;
			}
		}

		&.cd0 {
			background: #EFF5EE;

			.min_qiu {
				background: #E0F1DC;
			}

			.max_qiu {
				background: #E8F4E7;
			}
		}

		&.cd1 {
			background: #EFF5F5;

			.min_qiu {
				background: #D5EFE7;
			}

			.max_qiu {
				background: #E4F2F2;
			}

			.actBtn {
				color: #33BBD9;
				border: 1px solid #33BBD9;
			}
		}

		&.cd2 {
			background: #F5F1EE;

			.min_qiu {
				background: #F1EBD9;
			}

			.max_qiu {
				background: #F6EBE3;
			}

			.actBtn {
				color: #F5B036;
				border: 1px solid #F5B134;
			}
		}

		&.cd3 {
			background: #F8F6FD;

			.min_qiu {
				background: #F1EDFC;
			}

			.max_qiu {
				background: #F5F0FF;
			}

			.actBtn {
				color: #CEB9F9;
				border: 1px solid #CEB9F9;
			}
		}

		&.cd4 {
			background: #F4F7FF;

			.min_qiu {
				background: #EAF0FB;
			}

			.max_qiu {
				background: #E8EEFF;
			}

			.actBtn {
				color: #8AA1CC;
				border: 1px solid #8AA1CC;
			}
		}

		&.minpad {
			.camainMsg {
				padding-top: 20rpx;
			}

			.ca_dis {
				margin-top: 6rpx;
			}
		}

		.mconbox {
			position: relative;
			z-index: 3;
			padding-bottom: 30rpx;
			padding-top: 40rpx;
		}

		.min_qiu {
			width: 334rpx;
			height: 334rpx;
			right: -160rpx;
			bottom: -168rpx;
		}

		.max_qiu {
			width: 508rpx;
			height: 508rpx;
			left: -48rpx;
			top: -324rpx;
		}

		.fixbox {
			position: absolute;
			z-index: 1;
			background: rgba(232, 238, 255, 0.7);
			border-radius: 50%;
		}

		.ca_tit {
			font-size: 40rpx;
		}
	}

	.camainMsg {
		padding-top: 60rpx;
	}

	.moredis {
		margin-right: 120rpx;
	}

	.cdtext {
		overflow: hidden;
		white-space: nowrap;
	}

	.cbot_btn {
		padding-top: 80rpx;
	}

	.actBtn {
		// 192
		@include baseTag(142rpx, 56rpx);
		border-radius: 56rpx;
		border: 1px solid #56bf7a;
	}
</style>